<template>
	<Layout style="height: 100%" class="main">
		<Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}">
			<side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList">
				<!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
				<div class="logo-con">
					<img v-show="!collapsed" :src="maxLogo" key="max-logo" @click="home" id="maxImg" />
					<img v-show="collapsed" :src="minLogo" key="min-logo" @click="home" id="minImg" />
				</div>
			</side-menu>
		</Sider>
		<Layout>
			<Header class="header-con">
				<header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
					<user :user-avator="userAvator" />
					<fullscreen v-model="isFullscreen" style="margin-right: 10px;" />
					<Tooltip content="刷新">
						<img class="refresh" src="../../assets/images/ref.png" @click="refresh" alt />
					</Tooltip>
				</header-bar>
			</Header>

			<Content class="main-content-con">
				<Layout class="main-layout-con">
					<div class="tag-nav-wrapper">
						<tags-nav :value="$route" @input="handleClick" :list="tagNavList" @on-close="handleCloseTag" />
					</div>

					<Content class="content-wrapper">
						<keep-alive :include="cacheList">
							<router-view />
						</keep-alive>
					</Content>
				</Layout>
			</Content>
		</Layout>
	</Layout>
</template>
<script>
	import SideMenu from "./components/side-menu";
	import HeaderBar from "./components/header-bar";
	import TagsNav from "./components/tags-nav";
	import User from "./components/user";
	import Fullscreen from "./components/fullscreen";
	import { mapMutations, mapActions } from "vuex";
	import { getNewTagList, getNextRoute, routeEqual } from "@/libs/util";
	import minLogo from "@/assets/images/m-logo.png";
	import maxLogo from "@/assets/images/l-logo.png";
	import "./main.less";
	export default {
		name: "Main",
		inject: ["reload"],
		components: {
			SideMenu,
			HeaderBar,
			TagsNav,
			Fullscreen,
			User
		},
		data() {
			return {
				collapsed: false,
				minLogo,
				maxLogo,
				isFullscreen: false,
				list: [],
				menuList: [],
				i: 0
			};
		},
		computed: {
			tagNavList() {
				return this.$store.state.app.tagNavList;
			},
			tagRouter() {
				return this.$store.state.app.tagRouter;
			},
			userAvator() {
				return this.$store.state.user.avatorImgPath;
			},
			cacheList() {
				return this.tagNavList.length ?
					this.tagNavList
					.filter(item => !(item.meta && item.meta.notCache))
					.map(item => item.name) :
					[];
			},
			local() {
				return this.$store.state.app.local;
			}
		},
		methods: {
			getMenuList() {
				let menuList = JSON.parse(localStorage.menu);
				this.axios.get("admin/index/authorize").then(res => {

					if(res.data.code == 200) {
						let authorize = res.data.data;
						localStorage.Review = authorize.indexOf(17) == -1 ? false : true;
						localStorage.Flow = authorize.indexOf(10) == -1 ? false : true;

						// console.log(JSON.parse(localStorage.menu));
						// console.log(menuList);
						// console.log(authorize);

						// if (authorize.indexOf(47) == -1) {
						//   menuList.splice(8, 1);
						// }
						if(authorize.indexOf(37) == -1) {
							menuList.splice(6, 1);
						}
						if(authorize.indexOf(30) == -1) {
							menuList.splice(5, 1);
						}
						if(authorize.indexOf(32) == -1) {
							menuList.splice(4, 1);
						} else {
							// if (authorize.indexOf(87) == -1) {
							//   menuList[6].children.splice(5, 1);
							// }
							// if (authorize.indexOf(86) == -1) {
							//   menuList[6].children.splice(4, 1);
							// }
							// if (authorize.indexOf(85) == -1) {
							//   menuList[6].children.splice(3, 1);
							// }
							if(authorize.indexOf(87) == -1) {
								menuList[4].children.splice(2, 1);
							}
							if(authorize.indexOf(83) == -1) {
								menuList[4].children.splice(1, 1);
							}
							if(authorize.indexOf(33) == -1) {
								menuList[4].children.splice(0, 1);
							}
						}
						//新加
						if(authorize.indexOf(94) == -1) {
							menuList.splice(3, 1);
						} else {
							if(authorize.indexOf(99) == -1) {
								menuList[3].children.splice(4, 1);
							}
							if(authorize.indexOf(98) == -1) {
								menuList[3].children.splice(3, 1);
							}
							if(authorize.indexOf(97) == -1) {
								menuList[3].children.splice(2, 1);
							}
							if(authorize.indexOf(96) == -1) {
								menuList[3].children.splice(1, 1);
							}
							if(authorize.indexOf(95) == -1) {
								menuList[3].children.splice(0, 1);
							}
						}
						if(authorize.indexOf(24) == -1) {
							menuList.splice(2, 1);
						} else {
							// if (authorize.indexOf(91) == -1) {
							//   menuList[3].children.splice(2, 1);
							// }
							if(authorize.indexOf(79) == -1) {
								menuList[2].children.splice(1, 1);
							}
							if(authorize.indexOf(77) == -1) {
								menuList[2].children.splice(0, 1);
							}
						}

						// if (authorize.indexOf(24) == -1) {
						//   menuList.splice(2, 1);
						// } else {
						//   if (authorize.indexOf(82) == -1) {
						//     menuList[2].children.splice(6, 1);
						//   }
						//   if (authorize.indexOf(81) == -1) {
						//     menuList[2].children.splice(5, 1);
						//   }
						//   if (authorize.indexOf(77) == -1) {
						//     menuList[2].children.splice(4, 1);
						//   }
						//   if (authorize.indexOf(80) == -1) {
						//     menuList[2].children.splice(3, 1);
						//   }
						//   if (authorize.indexOf(79) == -1) {
						//     menuList[2].children.splice(2, 1);
						//   }

						//   if (authorize.indexOf(78) == -1) {
						//     menuList[2].children.splice(1, 1);
						//   }
						//   if (authorize.indexOf(78) == -1) {
						//     menuList[2].children.splice(0, 1);
						//   }
						// }

						if(authorize.indexOf(15) == -1) {
							menuList.splice(1, 1);
						} else {
							// if (authorize.indexOf(93) == -1) {
							//   menuList[1].children.splice(6, 1);
							// }
							// if (authorize.indexOf(18) == -1) {
							//   menuList[1].children.splice(5, 1);
							// }
							// if (authorize.indexOf(20) == -1) {
							//   menuList[1].children.splice(4, 1);
							// }
							if(authorize.indexOf(18) == -1) {
								menuList[1].children.splice(4, 1);
							}
							if(authorize.indexOf(19) == -1) {
								menuList[1].children.splice(3, 1);
							}
							if(authorize.indexOf(18) == -1) {
								menuList[1].children.splice(2, 1);
							}
							if(authorize.indexOf(17) == -1) {
								menuList[1].children.splice(1, 1);
							}
							if(authorize.indexOf(16) == -1) {
								menuList[1].children.splice(0, 1);
							}
						}

						if(authorize.indexOf(6) == -1) {
							menuList.splice(0, 1);
						} else {
							// if (authorize.indexOf(92) == -1) {
							//   menuList[0].children.splice(3, 1);
							// }
							if(authorize.indexOf(9) == -1) {
								menuList[0].children.splice(2, 1);
							}
							if(authorize.indexOf(8) == -1) {
								menuList[0].children.splice(1, 1);
							}
							if(authorize.indexOf(7) == -1) {
								menuList[0].children.splice(0, 1);
							}
						}
					}
					this.menuList = menuList;
				});
			},
			refresh() {
				this.reload();
			},
			home() {
				this.$router.push({
					name: "home"
				});
			},
			...mapMutations(["setBreadCrumb", "setTagNavList", "addTag", "setLocal"]),
			...mapActions(["handleLogin"]),
			turnToPage(route) {
				let {
					name,
					params,
					query
				} = {};
				if(typeof route === "string") name = route;
				else {
					name = route.name;
					params = route.params;
					query = route.query;
				}
				if(name.indexOf("isTurnByHref_") > -1) {
					window.open(name.split("_")[1]);
					return;
				}
				this.$router.push({
					name,
					params,
					query
				});
			},
			handleCollapsedChange(state) {
				this.collapsed = state;
				if(state) {
					document.getElementsByClassName("logo-con")[0].style.height = "0";
				} else {
					document.getElementsByClassName("logo-con")[0].style.height = "auto";
				}
			},
			handleCloseTag(res, type, route) {
				let openName = "";
				if(type === "all") {
					this.turnToPage("home");
					openName = "home";
				} else if(routeEqual(this.$route, route)) {
					if(type === "others") {
						openName = route.name;
					} else {
						const nextRoute = getNextRoute(this.tagNavList, route);
						this.$router.push(nextRoute);
						openName = nextRoute.name;
					}
				}
				this.setTagNavList(res);
				this.$refs.sideMenu.updateOpenName(openName);
			},
			handleClick(item) {
				this.turnToPage(item);
			}
		},
		watch: {
			$route(newRoute) {
				this.setBreadCrumb(newRoute.matched);
				this.setTagNavList(getNewTagList(this.tagNavList, newRoute));
			}
		},
		mounted() {
			/**
			 * @description 初始化设置面包屑导航和标签导航
			 */
			this.setTagNavList();
			this.addTag({
				route: this.$store.state.app.homeRoute
			});
			this.setBreadCrumb(this.$route.matched);
			// 设置初始语言
			this.setLocal(this.$i18n.locale);
			// 文档提示
			// this.getList()
			localStorage.menu = JSON.stringify(this.$store.getters.menuList);
			this.menuList = this.$store.getters.menuList;
			this.getMenuList();
		}
	};
</script>

<style>
	#minImg {
		height: auto;
		width: 30px;
	}
	
	#maxImg {
		height: 37px;
		/*height: auto;*/
		/*width: 100%;*/
	}
	
	.main .logo-con {
		height: auto;
	}
</style>